<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#3478F2' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="申请借款"
				title-color="#fff"
				title-size="40"
				title-bold
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="content">
				<view class="top">
					<view class="top_item">
						<view class="circle active">
							<image class="img" src="/static/icon/xuqiu.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text">借款需求</text>
					</view>
					<view class="top_item">
						<view class="circle">
							<image class="img" src="/static/icon/shenminghui.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text">实名申请</text>
					</view>
					<view class="top_item">
						<view class="circle">
							<image class="img" style="margin-left: 8rpx" src="/static/icon/jiekuanhui.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text">填写借款资料</text>
					</view>
					<view class="top_item">
						<view class="circle">
							<image class="img" src="/static/icon/shenpihui.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text">审核放款</text>
					</view>
				</view>
				<view class="gou">一分钟填写借款资料，极速下款最高20万</view>
				<view class="demand_page">
					<view class="title">
						<view>*</view>
						<view class="title_text">借款需求</view>
						<view class="underline"></view>
					</view>
					<view class="dec">
						<text class="grayText">您最高可以借200,000元</text>
						<text class="blueText" @click="all">全部借出</text>
					</view>
					<view class="money">
						<view class="m_left">
							<text>￥</text>
							<input class="ipt" type="text" :focus="focus" v-model="money" />
						</view>
						<view class="m_right">
							<text>（金额可修改）</text>
							<image src="/static/icon/guan_bi.png" mode="scaleToFill" @click="clear" />
						</view>
					</view>
					<view class="tips">
						<image src="/static/icon/dunpai.png" mode="scaleToFill" />
						<text>国家级数据加密保护，仅用于贷款审核</text>
					</view>
					<view class="btn headle" @click="next">下一步</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	data() {
		return {
			money: '500,000',
			focus: false
		}
	},
	methods: {
		all() {
			this.money = '200,000'
		},
		// 清楚金额
		clear() {
			this.money = ''
			this.focus = true
		},
		next() {
			uni.navigateTo({
				url: '/pages/auth/shiming'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.top {
	width: 750rpx;
	height: 180rpx;
	background: #ffffff;
	border-radius: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 52rpx;
}
.top_item_text {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
	margin-top: 8rpx;
}
.top_item_text.active {
	color: #3478f2;
}
.img {
	width: 60rpx;
	height: 60rpx;
}
.circle {
	width: 88rpx;
	height: 88rpx;
	border-radius: 100%;
	// background: #e4e4e4;
	background: #f0f0f0;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.circle.active {
	background: #3478f2;
}
.circle::after {
	position: absolute;
	content: '';
	width: 120rpx;
	height: 8rpx;
	background: #d9d9d9;
	top: 50%;
	left: 87rpx;
}
.circle.active::after {
	background: #3478f2;
}
.top_item:last-child .circle::after {
	height: 0rpx;
}
.gou {
	width: 750rpx;
	height: 64rpx;
	background: #e4eeff;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	line-height: 64rpx;
	text-align: center;
}
.demand_page {
	width: 750rpx;
	height: 824rpx;
	background: #ffffff;
	padding: 40rpx 32rpx 0 32rpx;
	font-family: PingFang SC;
	.title {
		display: flex;
		position: relative;
		:first-child {
			width: 16rpx;
			height: 44rpx;
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fc1f1f;
			margin-right: 8rpx;
		}
		.title_text {
			// width: 160rpx;
			// height: 56rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
			font-family: PingFang SC;
		}
		.underline {
			width: 38rpx;
			height: 4rpx;
			background: #3478f2;
			position: absolute;
			bottom: -8rpx;
			left: 26rpx;
		}
	}
	.dec {
		margin-top: 28rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 400;
		font-family: PingFang SC;
		.grayText {
			color: #696969;
		}
		.blueText {
			color: #3478f2;
		}
	}
	.money {
		margin-top: 50rpx;
		width: 686rpx;
		height: 100rpx;
		border-bottom: 2rpx solid #cdd0d6;
		padding-left: 24rpx;
		padding-right: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.m_left {
			display: flex;
			font-size: 72rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
			align-items: center;
			.ipt {
				font-size: 72rpx;
				font-family: PingFang SC;
				font-weight: 800;
				width: 300rpx;
			}
		}
		.m_right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #aeaeae;
			display: flex;
			align-items: center;
			image {
				height: 32rpx;
				width: 32rpx;
			}
		}
	}
	.tips {
		margin-top: 272rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #bba66d;
		image {
			width: 24rpx;
			height: 28rpx;
			margin-right: 12rpx;
		}
	}
	.btn {
		margin: 0 auto;
		margin-top: 24rpx;
		width: 652rpx;
		height: 92rpx;
		background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
		border-radius: 70rpx;
		text-align: center;
		line-height: 92rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
}
</style>
